<template>
  <div class="login-container">
    <div class="login-panel">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <div class="server-icon">
          <i class="el-icon-s-platform" />
        </div>
        <h2>领码</h2>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <h2 class="login-title">
          欢迎使用领码.SPARK
        </h2>
        <p class="login-subtitle">
          请登录您的账号以继续使用系统
        </p>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          @keyup.enter.native="handleLogin"
        >
          <!-- 登录方式选项卡 -->
          <el-tabs
            v-model="activeTab"
            class="login-tabs"
          >
            <el-tab-pane
              label="账号登录"
              name="account"
            >
              <el-form-item prop="strUser">
                <el-input
                  v-model="loginForm.strUser"
                  placeholder="请输入账号"
                  prefix-icon="el-icon-user"
                  size="big"
                />
              </el-form-item>
              <el-form-item prop="strPwd">
                <el-input
                  v-model="loginForm.strPwd"
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  size="big"
                  show-password
                />
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane
              label="验证码登录"
              name="code"
            >
              <el-form-item prop="phone">
                <el-input
                  v-model="loginForm.phone"
                  placeholder="请输入手机号"
                  prefix-icon="el-icon-mobile-phone"
                  size="medium"
                />
              </el-form-item>
              <el-form-item prop="code">
                <div class="code-input-group">
                  <el-input
                    v-model="loginForm.code"
                    placeholder="请输入验证码"
                    prefix-icon="el-icon-message"
                    size="medium"
                  />
                  <el-button
                    :disabled="codeDisabled"
                    class="code-btn"
                    size="medium"
                    @click="sendCode"
                  >
                    {{ codeText }}
                  </el-button>
                </div>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>

          <el-button
            type="primary"
            class="login-button"
            :loading="loading"
            size="big"
            @click="handleLogin"
          >
            登录
          </el-button>

          <div class="forgot-password">
            <a
              href="#"
              @click.prevent="handleForgotPassword"
            >忘记密码</a>
          </div>
        </el-form>

        <!-- 其他登录方式 -->
        <div class="other-login">
          <div class="other-login-title">
            其他登录方式
          </div>
          <div class="login-options">
            <div
              class="login-option"
              @click="handleQrLogin"
            >
              <div class="login-option-icon">
                <i class="el-icon-camera" />
              </div>
              <div class="login-option-text">
                扫码登录
              </div>
            </div>
            <div
              class="login-option"
              @click="handleEmailLogin"
            >
              <div class="login-option-icon">
                <i class="el-icon-message" />
              </div>
              <div class="login-option-text">
                邮箱登录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login ,GetUserInfo } from '@/api/Login/index';
export default {
  name: 'LoginPage',
  data() {
    return {
      activeTab: 'account', // 默认选中账号登录
      loading: false,
      codeDisabled: false,
      codeText: '获取验证码',
      countdown: 60,
      loginForm: {
        strUser: 'test', // 用户名
        strPwd: 'test666666',  // 密码
        entName: 'NewApp', // 企业名称，默认为'NewApp'
        phone: '',   // 手机号
        code: ''     // 验证码
      },
      loginRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 发送验证码
    sendCode() {
      if (this.loginForm.phone && /^1[3456789]\d{9}$/.test(this.loginForm.phone)) {
        this.codeDisabled = true;
        this.countdown = 60;
        this.codeText = `${this.countdown}秒后重新发送`;

        const timer = setInterval(() => {
          this.countdown--;
          this.codeText = `${this.countdown}秒后重新发送`;

          if (this.countdown <= 0) {
            clearInterval(timer);
            this.codeDisabled = false;
            this.codeText = '获取验证码';
          }
        }, 1000);

        // 模拟发送验证码请求
        this.$message.success('验证码已发送到您的手机');
      } else {
        this.$message.error('请输入正确的手机号');
      }
    },

    // 处理登录
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;

          try {
            let credentials = {};

            if (this.activeTab === 'account') {
              // 账号密码登录
              credentials = {
                strUser: this.loginForm.strUser,
                strPwd: this.loginForm.strPwd,
                entName: this.loginForm.entName
              };
            } else {
              // 验证码登录（这里需要根据实际接口调整）
              credentials = {
                phone: this.loginForm.phone,
                code: this.loginForm.code
              };
            }

            // 调用API登录接口
            const res = await login(credentials)
            if (res.Code === 200) {
              // 存储token
              localStorage.setItem('vue-next-admin:access-token', JSON.stringify(res.Result.token));
               localStorage.setItem('vue-next-admin:x-access-token',JSON.stringify( res.Result.refreshToken));
              const userinfo =  await GetUserInfo();
           sessionStorage.setItem('users', JSON.stringify(userinfo.Result));
              // 跳转到首
              this.$router.push('/AppLayout');
            } else {
              this.$message.error(res.Message || '登录失败');
            }
            // 登录成功处理

          } catch (error) {
            console.error('登录失败:', error);
            this.$message.error(`登录失败: ${error.message || '请检查用户名和密码'}`);
          } finally {
            this.loading = false;
          }
        } else {
          this.$message.error('请正确填写表单');
          return false;
        }
      });
    },

    // 处理忘记密码
    handleForgotPassword() {
      this.$message.info('忘记密码功能暂未开放');
    },

    // 处理扫码登录
    handleQrLogin() {
      this.$message.info('扫码登录功能暂未开放');
    },

    // 处理邮箱登录
    handleEmailLogin() {
      this.$message.info('邮箱登录功能暂未开放');
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}

.login-panel {
  width: 900px;
  height: 550px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* 左侧面板样式 */
.left-panel {
  flex: 1;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 40px;
}

.server-icon {
  font-size: 120px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.left-panel h2 {
  font-size: 24px;
  font-weight: 500;
  margin-top: 20px;
  text-align: center;
}

/* 右侧面板样式 */
.right-panel {
  flex: 1;
  background-color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
  font-weight: 500;
}

.login-subtitle {
  color: #999;
  margin-bottom: 30px;
  font-size: 14px;
}

.login-form {
  width: 100%;
}


.code-input-group {
  display: flex;
  gap: 10px;
}

.code-btn {
  width: 120px;
}

.login-button {
  width: 100%;
  margin-top: 10px;
}

.forgot-password {
  text-align: right;
  margin-top: 10px;
}

.forgot-password a {
  color: #1890ff;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.forgot-password a:hover {
  text-decoration: underline;
}

.other-login {
  margin-top: 30px;
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.other-login-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}

.login-options {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.login-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.login-option:hover {
  transform: translateY(-2px);
}

.login-option-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  color: #666;
  font-size: 20px;
  transition: background-color 0.3s;
}

.login-option:hover .login-option-icon {
  background-color: #e6f7ff;
  color: #1890ff;
}

.login-option-text {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-panel {
    flex-direction: column;
    height: auto;
    width: 90%;
    max-width: 400px;
  }

  .left-panel {
    padding: 20px;
  }

  .server-icon {
    font-size: 80px;
  }

  .left-panel h2 {
    font-size: 18px;
  }
}
</style>